<template>
  <div class="score-card">
    <div class="score-card__header">
      <span class="score-card-title">{{ data.title }}</span>
      <span class="score-card-score">+{{ data.score }}分</span>
    </div>
    <div class="score-card__footer">{{ data.createTime }}</div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    data: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="less">
.score-card {
  box-shadow: inset 0 -2px 0 0 #f5f5f5;
  padding: 20px 40px;
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 32px;
    font-weight: bold;
  }

  &-title {
    color: #333333;
  }

  &-score {
    display: flex;
    align-items: center;
    color: @primary;
  }

  &__footer {
    font-size: 24px;
    color: #999999;
    margin-top: 8px;
  }
}
</style>
